<template>
  <div class="user-warp-white">
    <div class="user-info">
      <div class="user-panel">
        <img :src="user.anchor.avatar" v-if="user.anchor.avatar">
        <img src="../assets/img/defaultImg.jpeg" v-else>
        <p class="user-name">{{user.anchor.shopName}}</p>
        <p><span>粉丝 &nbsp; 10万</span>&nbsp;&nbsp;&nbsp;
          <a class="follow" @click="concern" v-if="(isConcern===0)">关注</a>
          <a class="follow" @click="cancelConcern" v-if="(isConcern===1)">已关注</a>
        </p>
      </div>
    </div>

    <div class="play-panel">
      <router-link class="play-item" :to="{name: 'YuGao', query: {id: user.advanceLiving.id}}" v-if="user.advanceLiving.id">
        <p class="play-name">{{user.advanceLiving.title}}</p>
        <p class="play-other" v-if="user.advanceLiving.status === 1">
          <span class="play-label">直播中</span>&nbsp;&nbsp;{{user.advanceLiving.totalMemberNum}}人观看
        </p>
        <p class="play-other" v-if="user.advanceLiving.status === 0">
          <span class="play-label trailer">预告</span>&nbsp;&nbsp;{{ formatDate(user.advanceLiving.startDate) }}开播
        </p>
      </router-link>
      <router-link class="play-item" :to="{name: 'Player', query: {id: user.currnetLiving.id}}" v-if="user.currnetLiving.id">
        <p class="play-name">{{user.currnetLiving.title}}</p>
        <p class="play-other" v-if="user.currnetLiving.status === 1">
          <span class="play-label">直播中</span>&nbsp;&nbsp;{{user.currnetLiving.totalMemberNum}}人观看
        </p>
        <p class="play-other" v-if="user.currnetLiving.status === 0">
          <span class="play-label trailer">预告</span>&nbsp;&nbsp;{{ formatDate(user.currnetLiving.startDate) }}开播
        </p>
      </router-link>
    </div>

    <div class="replay-panel">
      <p class="replay-tit"><i class=""></i>精彩回放 </p>
      <div class="replay-item" v-for="item in linedList">
        <p class="replay-name">{{item.title}}</p>
        <p class="play-other">
          <span class="replay-label">回放</span>&nbsp;{{item.totalMemberNum}}人观看 | {{item.likeNum}}赞 <span class="time">{{formatDate(item.startDate)}}</span>
        </p>
        <div class="replay-video">
          <div class="video-list">
            <div class="video-item" v-for="recordItem in item.livingRecordList">
              <router-link :to="{name: 'BackPlayer', query: {id: recordItem.id}}" class="video-panel" :style="{ background: 'url('+item.coverUrl+') center no-repeat', backgroundSize: '100%'}"></router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
  import { Toast } from 'mint-ui';
  import util from '../common/util.js';
  export default {
    data () {
      return {
        sellerId: this.$route.query.sellerId || null,
        user: {
          anchor: {},
          advanceLiving: {},
          currnetLiving: {},
          memberId:''
        },
        memberId: '',
        list: [],
        linedList: [],
        isConcern: 0,
        playbackUrl: window.playbackUrl
      }
    },
    components: {
    },
    computed: {},
    beforeMount(){
      this.getAnchorInfo();
      this.getLinedList();
    },
    mounted(){
      this.isConcernAnchor();
    },
    activated(){

    },
    methods: {
      formatDate: util.formatDate,
      getCookie: util.getCookie,
      setCookie: util.setCookie,
      /**
       * 获取主播信息
       */
      getAnchorInfo() {
        this.httpPost(this.API.anchorInfo, {sellerId: this.sellerId}).then((res) => {
          if (res) {
            this.user = res.data;
            this.memberId=this.user.memberId
          }
        })
      },

      /***
       * 关注
       */
      concern() {
        if(!this.memberId){
          this.setCookie('currentUrl', location.href);
          location.href = this.playbackUrl + '/wechat/union/authen'
          return;
        }
        let paranms = {
          sellerId : this.sellerId,
          memberId: this.memberId
        }
        this.httpPost(this.API.anchorFollow, paranms).then((res) => {
          if(res) {
            Toast({
              message: res.data,
              duration: 1500
            });
            this.isConcern = 1;
          }
        })
      },

      /***
       *  取消关注
       */
      cancelConcern() {
        let paranms = {
          sellerId : this.sellerId,
          memberId: this.memberId
        }
        this.httpPost(this.API.cancelFollow, paranms).then((res) => {
          if(res) {
            Toast({
              message: res.data,
              duration: 1500
            });
            this.isConcern = 0;
          }
        })
      },

      /**
       * 获取录播列表
       */
      getLinedList() {
        let params = {
          currentPage: 1,
          pageSize: 10,
          sellerId: this.sellerId
        }
        this.httpPost(this.API.playbackList, params).then((res) => {
          if (res) {
            let data = res.data;
            this.linedList = this.linedList.concat(data.list);
          }
        })
      },

      /**
       * 受否已关注主播
       */
      isConcernAnchor() {
        let params = {
          sellerId: this.sellerId
        }
        this.httpPost(this.API.concernAnchor, params).then((res) => {
          if (res) {
            this.isConcern = res.data;
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped></style>
